<template>
	<view>
		<swiper indicator-dots indicator-color="rgba(255, 255, 255, 0.3)" indicator-active-color="#ffffff" circular autoplay="2000" vertical>
			<swiper-item><image src="/static/pic1.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="/static/pic2.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="/static/pic3.webp" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="/static/pic4.jpg" mode="aspectFill"></image></swiper-item>
		</swiper>
	</view>
	-----
	<navigator url="/pages/demo2/demo2">跳转到demo2</navigator>
	<view>
		<image class="pic1" src="/static/logo.png"></image>
		<image class="pic2" mode="aspectFill" src="/static/pic3.webp"></image>
		<image class="pic3" mode="heightFix" src="/static/pic4.jpg"></image>
	</view>
</template>

<script>

</script>

<style lang="scss">
	swiper {
		width: 100vw;
		border: 1px solid green;
		height: 200px;
		swiper-item {
			background-color: red;
			width: 100vw;
			height: 100vh;
			background: pink;
			image {
				width: 100%;
				height: 100%;
			}
		}
		swiper-item:nth-child(2n) {
			background-color: orange;
		}
	}
	.pic1 {
		width: 150px;
		height: 150px;
	}
	.pic2 {
		width: 200px;
		height: 200px;
	}
	.pic3 {
		height: 200px;
	}
</style>
